<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>导出 Logo 为 PNG</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    .logo-container {
      text-align: center;
      margin: 40px 0;
    }
    .logo {
      width: 300px;
      height: 300px;
    }
    .instructions {
      background-color: #f5f5f5;
      padding: 20px;
      border-radius: 5px;
    }
    .instructions ol {
      margin-left: 20px;
    }
  </style>
</head>
<body>
  <h1>导出 Mars Admin Logo 为 PNG</h1>
  
  <div class="logo-container">
    <img src="logo.svg" alt="Mars Admin Logo" class="logo" id="logo">
  </div>
  
  <div class="instructions">
    <h2>如何保存为 PNG 文件：</h2>
    <ol>
      <li>右键点击上方的 Logo 图像</li>
      <li>选择"图片另存为..."或"保存图片"选项</li>
      <li>将文件名改为 <strong>logo2.png</strong></li>
      <li>确保保存类型为 PNG</li>
      <li>点击保存</li>
    </ol>
    <p><strong>注意：</strong>如果您需要更高分辨率的 PNG，可以调整下方的尺寸，然后重新保存。</p>
    
    <h3>调整尺寸：</h3>
    <label for="size">尺寸 (像素): </label>
    <input type="number" id="size" value="300" min="100" max="2000" step="100">
    <button onclick="resizeLogo()">应用</button>
  </div>
  
  <script>
    function resizeLogo() {
      const size = document.getElementById('size').value;
      const logo = document.getElementById('logo');
      logo.style.width = size + 'px';
      logo.style.height = size + 'px';
    }
  </script>
</body>
</html> 